@charset "utf-8";
@import "reset";

@function r($px) {
  @return $px/100 * 1rem;
}
@function vw($px) {
  @return $px/750 * 100vw;
}
section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.imgWrap1 img {
  height: 100vh;
  width: 100vw;
}
.imgWrap img {
  width: 100%;
  height: 100%;
}
@keyframes rotateLight1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateLight2 {
  0% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(390deg);
  }
}
@keyframes rotateLight3 {
  0% {
    transform: rotate(60deg);
  }

  100% {
    transform: rotate(420deg);
  }
}
@keyframes rotateLight4 {
  0% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(450deg);
  }
}
@keyframes rotateLight5 {
  0% {
    transform: rotate(120deg);
  }

  100% {
    transform: rotate(480deg);
  }
}
@keyframes rotateLight6 {
  0% {
    transform: rotate(150deg);
  }

  100% {
    transform: rotate(510deg);
  }
}
@keyframes big {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(7deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes timeOut{
  0% {
   opacity: 1;
  }
 
  100% {
    opacity: 0;
  }
}

//动画类

.down{
  animation: rotateIn 1s;
}
.left{
  animation: fadeInLeft 1s;
}
.right{
  animation: fadeInRight 1s;
}

//主页
.first {
  width: 400vw;
  display: flex;
  justify-content: center;
  transform: translate(-0vw);
  transition: all 0.7s;
  position: relative;
  z-index: 3;
}
//加载页面
section .loading {
  height: 100vh;
  width: 100vw;
  position: relative;
  background-image: url(../images/earth.png), url(../images/star.png);
  background-size: vw(598) vw(410), cover;
  background-repeat: no-repeat;
  background-position: bottom right, center;
  display: block;
  .man {
    width: vw(665);
    position: absolute;
    bottom: vw(180);
    right: vw(49);
  }
  .rocket {
    width: vw(152);
    position: absolute;
    bottom: vw(197);
    right: vw(358);
  }
  .tip {
    width: vw(254);
    position: absolute;
    bottom: vw(0);
    right: vw(271);
  }
  .jump {
    width: vw(134);
    position: absolute;
    bottom: vw(28);
    right: vw(16);
  }
  .progressNow {
    .text {
      color: white;
      width: vw(200);
      font-size: vw(28);
      position: absolute;
      font-weight: bold;
      bottom: vw(30);
      left: vw(5);
      span {
        font-weight: bold;
        font-size: vw(40);
        color: gold;
      }
    }
  }
}

//开始页面
section .start {
  display: block;
  overflow: hidden;
  position: relative;
  height: 100vh;
  width: 100vw;
  .kugouLogo {
    width: 35%;
    position: absolute;
    right: 16px;
    top: vw(18);
  }

  .startTitle {
    width: 95%;
    margin: 0 auto;
    padding-top: vw(105);
    position: relative;
    z-index: 2;
  }
  .mouse-box {
    width: 92%;
    position: relative;
    margin-left: r(35);
    z-index: 1;
    .mouse {
      position: absolute;
      top: vw(-85);
      right: r(25);
      animation: big 1s infinite linear;
    }
    .dog {
      width: vw(240);
      position: absolute;
      left: vw(262);
      top: vw(74);
      //transform: translate(-50%,-50%);
    }
  }
  .leftMan {
    width: 48%;
    position: absolute;
    bottom: vw(150);
    left: r(23);
    z-index: 2;
  }
  .rightMan {
    width: 48%;
    position: absolute;
    bottom: vw(90);
    right: vw(10);
    z-index: 2;
  }
  .question {
    width: 30%;
    position: absolute;
    left: r(11);
    bottom: vw(298);
    z-index: 2;
    animation: rotate 1s infinite linear reverse;
  }

  div[class^="erro"] {
    width: vw(60);
    position: absolute;
    z-index: 3;
  }
  .erro1 {
    bottom: vw(476);
    right: vw(270);
  }
  .erro2 {
    bottom: vw(482);
    right: vw(11);
  }
  .erro3 {
    bottom: vw(371);
    right: vw(301);
  }
  .erro4 {
    bottom: vw(320);
    right: vw(16);
  }
  .startButton {
    width: 52.5%;
    position: absolute;
    margin-left: r(189);
    bottom: vw(33);
    z-index: 2;
  }
}

//游戏轮播页面
 section {
  .swiper-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: block;
    .swiper-wrapper {
      .swiper-slide {
        width: 100vw;
        height: 100vh;
        .filmSong {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          .whatLove {
            width: vw(658);
            top: vw(83);
            position: absolute;
          }
          .filmPerson {
            position: absolute;
            top: vw(203);
            left: vw(64);
            width: vw(664);
          }
          .hill {
            width: vw(750);
            position: absolute;
            top: vw(686);
          }
        }
        .rock {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          .rockEarth {
            position: absolute;
            width: vw(652);
            left: vw(59);
            top: vw(0);
          }
          .man {
            width: vw(515);
            position: absolute;
            left: vw(110);
            top: vw(144);
            z-index: 2;
          }
          .leftMan {
            width: vw(430);
            position: absolute;
            top: vw(313);
          }
          .rightMan {
            width: vw(385);
            position: absolute;
            top: vw(250);
            right: vw(0);
          }
          .stage {
            width: vw(750);
            position: absolute;
            top: vw(595);
          }
        }
        .bath {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative;
          .bathEarth {
            position: absolute;
            width: vw(652);
            left: vw(59);
            top: vw(0);
          }
          .manOne {
            width: vw(465);
            position: absolute;
            top: vw(150);
            left: vw(225);
          }
          .manTwo {
            width: vw(750);
            position: absolute;
            top: vw(132);
            left: vw(33);
          }
          .board1 {
            width: vw(415);
            position: absolute;
            top: vw(338);
            left: vw(0);
          }
          .board2 {
            width: vw(415);
            position: absolute;
            top: vw(410);
            right: vw(0);
          }
          .bathBottom {
            width: vw(750);
            position: absolute;
            top: vw(560);
            left: vw(0);
            z-index: -1;
          }
          .bathSoap {
            width: vw(220);
            position: absolute;
            top: vw(740);
            left: vw(70);
            transform: translate(0px, 0px);
          }
        }
        .car {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          .carEarth {
            position: absolute;
            width: vw(652);
            left: vw(59);
            top: vw(0);
          }
          .carModel {
            width: vw(730);
            position: absolute;
            top: vw(328);
            left: vw(10);
          }
          .rose {
            width: vw(160);
            position: absolute;
            top: vw(312);
            right: vw(20);
          }
          .has {
            width: vw(485);
            position: absolute;
            top: vw(100);
            left: vw(70);
          }
        }
        .old {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          .oldEarth {
            width: vw(467);
            position: absolute;
            right: vw(0);
            top: vw(0);
          }
          .older {
            width: vw(587);
            position: absolute;
            left: vw(57);
            top: vw(77);
          }
          .flower {
            width: vw(687);
            position: absolute;
            left: vw(35);
            top: vw(400);
            z-index: -1;
          }
        }
        .fashion {
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          background-image: url(../images/fashion-bc.png);
          background-size: cover;
          .fashionTitle {
            width: vw(497);
            position: absolute;
            top: vw(24);
            left: vw(20);
            z-index: 1;
          }
          .fashionLeft {
            width: vw(725);
            position: absolute;
            top: vw(324);
            left: vw(25);
          }
          .fashionRight {
            width: vw(451);
            position: absolute;
            top: vw(140);
            left: vw(300);
          }
        }
      }
    }
  }
  .musicPlay{
    position: absolute;
    width: 0;
    height: 0;
    top: 0px;
  }
  .timeOver{
    animation:timeOut 1.5s forwards;
  }
}
//结束页面
section .end {
  width: 100vw;
  height: 100vh;
  display: block;
  overflow: hidden;
  // background-image: url(../images/result-bc.png);
  background-size: 100vw 100vh;
  position: relative;
  .lbox{
    position: absolute;
    left: 50vw;
    top: vw(245);
    div[class^="light"] {
      border-right: 90vh solid #edec92;
      border-left: 90vh solid #edec92;
    }
  }
  .title {
    position: relative;
    .title-left {
      width: vw(292);
      height: vw(104);
      position: absolute;
      top: vw(20);
      left: vw(17);
      background-image: url(../images/result-log.png);
      background-size: vw(292) vw(104);
      .content {
        width: 100%;
        height: 99%;
        padding: vw(21);
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .content-left {
          width: vw(65);
          height: vw(65);
          border-radius: vw(33);
        }
        .content-right {
          font-size: vw(26);
          line-height: vw(26);
          font-weight: bold;
          width: vw(183);
          text-align: center;
        }
      }
    }
    .title-right {
      width: vw(260);
      position: absolute;
      top: vw(17);
      right: vw(20);
    }
  }
  .grading {
    width: vw(150);

    margin: 0 auto;
    padding-top: vw(120);
  }
  .good {
    width: vw(332);
    height: vw(103);
    background-image: url(../images/getNum.png);
    background-size: vw(332) vw(103);
    display: flex;
    margin: 0 auto;
    .good-text {
      font-size: vw(52);
      line-height: vw(52);
      padding-top: vw(33);
      margin-left: vw(50);
      font-weight: bold;
      span {
        font-size: vw(52);
      }
    }
  }
  .detail-box {
    padding-top: vw(20);
    .detail {
      width: vw(700);
      height: vw(197);
      margin: 0 auto;
      background-image: url(../images/resultDeatil.png);
      background-size: vw(700) vw(197);
      .detail-text {
        text-indent: 1em;
        line-height: vw(58);
        padding-top: vw(25);
        font-size: vw(30);
        font-weight: bold;
        margin: 0 auto;
        text-align: center;
        width: vw(615);
        -moz-user-select:none; -webkit-user-select:none;
      }
    }
  }
  .challenge {
    width: vw(686);
    margin-left: vw(44);
    margin-top: vw(24);
    position: relative;
    z-index: 3;
    .challenge-left {
      width: vw(300);
      height: vw(109);
      background-image: url(../images/again.png);
      background-size: vw(300) vw(109);
     
    }
    .challenge-right {
      width: vw(340);
      height: vw(106);
      background-image: url(../images/share.png);
      background-size: vw(340) vw(106);
      z-index: 3;
    }
  }
  .friendRank {
    width: 100%;
    z-index: 2;
    position: absolute;
    bottom: vw(10);
    .friendRankBox {
      width: vw(600);
      height: vw(300);
      margin: 0 auto;
      background-image: url(../images/result-rank.png);
      background-size: vw(600) vw(300);
    }
  }
}

.timeTip{
  color: red;
  font-weight: bold;
  position: fixed;
  font-size:vw(25);
  line-height: vw(100);
  width: vw(200);
  height: vw(100);
  text-align: center;
  left: 35vw;
  bottom:vw(384);
  z-index: 5;
  border: 3px solid gray;
  background-color: gold;
  opacity: 0;
}
/*问题选择框样式*/
.questionAnswer {
  position: relative;
  z-index: 4;
  display: none;
  ul {
    position: fixed;
    left: vw(40);
    bottom: vw(13);
    li {
      //font-size: 100px;
      margin-bottom: vw(19);
      width: vw(524);
      height: vw(110);
      background-size: vw(524) vw(110);
      &:nth-of-type(1) {
        background-image: url(../images/questionA.png);
      }
      &:nth-of-type(2) {
        margin-left: vw(8);
        background-image: url(../images/questionB.png);
      }
      &:nth-of-type(3) {
        background-image: url(../images/questionC.png);
      }
      .text {
        padding: vw(30) vw(0);
        padding-left: vw(50);
        font-size: vw(32);
        text-align: center;
        font-weight: bold;
         -moz-user-select:none; -webkit-user-select:none;
      }
    }
  }
  .next {
    position: fixed;
    bottom: vw(41);
    left: vw(610);
    width: vw(88);
    height: vw(230);
    background-image: url(../images/next.png);
    background-size: vw(88) vw(230);
  }
  .mouseTime {
    width: vw(139);
    height: vw(124);
    background-image: url(../images/timer.png);
    background-size: vw(139) vw(124);
    position: fixed;
    left: vw(580);
    bottom: vw(293);
    .timeText {
      font-size: vw(32);
      margin: 0 auto;
      text-align: center;
      line-height: vw(124);
      -moz-user-select:none;
      -webkit-user-select:none;
    }
  }
}

//背景样式
.circleBc {
  position: absolute;
  width: 100vw;
  height: 100vh;
  .circleBox {
    width: 100%;
    height: 100%;
    position: relative;
    div[class^="item"] {
      border-radius: 50%;
      position: absolute;
      margin: auto;
      top: -9999px;
      left: -9999px;
      right: -9999px;
      bottom: -9999px;
      z-index: -1;
      border: vw(70) solid #4f4f4f;
      animation: big .7s infinite;
    }
    .item1Bc {
      width: vw(216);
      height: vw(216);
      top: vw(264);
      left: vw(402);
      background-color: #4f4f4f;
    
    }
    .item2Bc {
      width: vw(442);
      height: vw(442);
      top: vw(149);
      left: vw(288);
    }
    .item3Bc {
      width: vw(694);
      height: vw(694);
      top: vw(21);
      left: vw(173);
    }
    .item4Bc {
      width: vw(944);
      height: vw(944);
      top: vw(-94);
      left: vw(58);
    }
    .item5Bc {
      width: vw(1200);
      height: vw(1200);
      top: vw(-209);
      left: vw(-57);
    }
    .item6Bc {
      width: vw(1450);
      height: vw(1450);
      top: vw(-324);
      left: vw(-172);
    }
    .item7Bc {
      width: vw(1700);
      height: vw(1700);
      top: vw(-439);
      left: vw(-287);
    }
  }
}

.bath .circleBc {
  top: vw(-220);
  left: vw(140);
}
.car .circleBc {
  top: vw(-132);
  left: vw(0);
}
.old .circleBc {
  top: vw(-230);
  left: vw(0);
}

//灯光
div[class^="light"] {
  width: 0px;
  height: 0px;

  position: absolute;
  margin: auto;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-right: 90vh solid #555555;
  border-left: 90vh solid #555555;
  z-index: -1;
}

.light1 {
  animation: rotateLight1 3s infinite linear;
}
.light2 {
  animation: rotateLight2 3s infinite linear;
}
.light3 {
  animation: rotateLight3 3s infinite linear;
}
.light4 {
  animation: rotateLight4 3s infinite linear;
}
.light5 {
  animation: rotateLight5 3s infinite linear;
}
.light6 {
  animation: rotateLight6 3s infinite linear;
}

